<template>
  <div class="likes-container">
    <div class="message-container">
      <div class="message-header">
        <h2>点赞消息管理</h2>
      </div>

      <!-- 点赞列表 -->
      <div class="message-list" v-loading="loading">
        <el-empty v-if="!loading && !likes.length" description="暂无点赞消息" />
        <template v-else>
          <div v-for="like in likes" :key="like.likeId" class="message-item">
            <div class="message-content">
              <div class="message-title">
                <span class="username">{{ like.userName }}</span>
                <span class="article">点赞了文章: {{ like.title }}</span>
              </div>
              <div class="message-footer">
                <span class="message-time">{{ like.createTime }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- 分页 -->
      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const likes = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取点赞列表
const fetchLikes = async () => {
  if (!userStore.token) return
  
  loading.value = true
  try {
    const response = await axios.get('/app/like/likesByUserId', {
      params: {
        userId: userStore.userInfo.id
      }
    })
    
    if (response.data.code === 200) {
      likes.value = response.data.data
      total.value = response.data.data.total
    }
  } catch (error) {
    console.error('获取点赞列表失败:', error)
    ElMessage.error('获取点赞列表失败')
  } finally {
    loading.value = false
  }
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchLikes()
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchLikes()
}

// 组件挂载时获取点赞
onMounted(() => {
  fetchLikes()
})
</script>

<style scoped>
.likes-container {
  padding: 20px;
  min-height: 100vh;
  /* 添加背景图片 */
  background-image: url("/images/backgroundImages/261448.jpg"); /* 图片路径 */
  background-size: cover; /* 覆盖整个区域 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; /* 固定背景 */
  
}

.message-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.message-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.message-list {
  min-height: 300px;
}

.message-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.message-item:hover {
  background-color: #f9f9f9;
}

.message-content {
  .message-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    
    .username {
      font-weight: bold;
      margin-right: 10px;
    }
    
    .article {
      color: #666;
      font-size: 14px;
    }
  }

  .message-footer {
    margin-top: 15px;
    .message-time {
      font-size: 12px;
      color: #999;
    }
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>